<template>
	<div>
		<el-row >
			
			<el-col :span="1" class="labelCol">
				<p class="labelText">日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small" v-model="time" format="yyyy-MM-dd" :editable=false type="date" placeholder="开始日期">
				</el-date-picker>
			</el-col>
			<el-col :span="1"  class="labelCol" style="text-algin:center;">
				<p class="labelText">至</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small" v-model="time2" format="yyyy-MM-dd" :editable=false type="date" placeholder="开始日期">
				</el-date-picker>
			</el-col>
		
			<el-col :span="10" >
				<el-button type="primary" size="small" v-on:click='baseQuery'>查询</el-button>
				<el-button type="primary" size="small" v-on:click="processOut">导出</el-button>
				<el-button type="primary" size="small" v-on:click='lookReport'>报表说明</el-button>
				<el-button class="el-icon-menu" type="primary" size="small" v-on:click='change'></el-button>
			</el-col>
		</el-row>
		<el-row>
			<table class="report_table" id="matching" cellspacing="0" cellpadding="0" width="100%" height="100%">
				<!--表格开始-->
				<tbody>
					<tr class="texttbody" height="40px;">
						<th scope="col" style="width: 300px;">公司</th>
						<th scope="col">SA姓名</th>
						<!--<th scope="col">接车日期</th>-->
						<th scope="col">匹配率</th>
						<th scope="col">接待数</th>
						<th scope="col">匹配车辆数</th>
						<th scope="col">未分配车辆数</th>

					</tr>
					<tr v-for="item in tableData.dataList">
						<td>{{item.oName}}</td>
						<td>{{item.receptor}}</td>
						<!--<td>{{item.jcrq}}</td>-->
						<td>{{item.ppl}}</td>
						<td>{{item.jcs}}</td>
						<td>{{item.pps}}</td>
						<td>{{item.wfp}}</td>

					</tr>

				</tbody>
			</table>

		</el-row>
		<el-dialog title="报表说明" v-model="reportShow" size="tiny">
			<div style="overflow-y: scroll;height: 400px;">
				<b style="font-size: 15px;">SA工单匹配率：</b>&nbsp;&nbsp;<b style="font-size: 12px;">车辆档案在分配之后，用于统计SA的接车情况</b><br><br>
				<b style="font-size: 15px;">SA：</b>&nbsp;&nbsp;<b style="font-size: 12px;">服务顾问</b><br><br>
				<b style="font-size: 15px;">接待数：</b>&nbsp;&nbsp;<b style="font-size: 12px;">指定日期接待车辆数</b><br><br>
				<b style="font-size: 15px;">匹配车辆数：</b>&nbsp;&nbsp;<b style="font-size: 12px;">指定日期接待的车辆中属于自己的车辆数</b><br><br>
				<b style="font-size: 15px;">未分配车辆数：</b>&nbsp;&nbsp;<b style="font-size: 12px;">指定的日期接待的车辆中未分配的车辆数</b><br><br>
				<b style="font-size: 15px;">匹配率：</b>&nbsp;&nbsp;<b style="font-size: 12px;">匹配车辆数/接待数，保留两位小数</b><br><br>
			</div>
		</el-dialog>
		<exports :tableId="tableId" :excelName="excelName" :template="template" v-on:backFunction="backFunction"></exports>

	</div>
</template>
<script>
	import exports from '../../plugins/exportModule.vue'
	export default {
		data: function() {
			return {
				//查询条件
				area: '',
				brand: '',
				companyId: window.localStorage.getItem("companyId"),
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				//baobiao shuoming
				reportShow: false,
				//表格显示
				table: true,
				msg: "123",
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//分组数据
				tableData: {
					total: 0,
					dataList: []
				},
				time: '',
				time2:'',
				//表格id
				tableId: '',
				//表格路径
				template: '',
				//
				excelName: 'SA工单匹配率.xls',
			}
		},
		methods: {
			//daochu 
			processOut: function() {
				this.$data.tableId = "matching";
				this.$data.template = "<template><div><table border='1'>{table}</table></div></template>";
			},
			//daochu fanhuihanshu
			backFunction: function() {
				this.$data.tableId = "";
			},
			//查看报表说明
			lookReport: function() {
				this.$data.reportShow = true;
			},
			//表格转换
			change: function() {
				if(this.$data.table == true) {
					this.$data.table = false;
				} else {
					this.$data.table = true;
				}
			},
			//查询
			baseQuery: function() {
				debugger;
				var dates;
				var dates2;
				if(this.$data.time == '') {
					dates = this.$data.time;
				} else {
					dates = this.moment(this.$data.time).format("YYYY-MM-DD");
				}
				if(this.$data.time2 == '') {
					dates2 = this.$data.time;
				} else {
					dates2 = this.moment(this.$data.time2).format("YYYY-MM-DD");
				}
				if(this.$data.companyId == '') {
					this.$message.error("请选择公司")
				} else {
					this.$http.post(this.API_ROOT + '/crm/kpi/WorkOrderMatchRate', this.$data.condition, {
							params: {
								mDate: dates,
								mDate2: dates2,
								companyId: this.$data.companyId,
								area: this.$data.area,
								brand: this.$data.brand,
								start: this.$data.CurentPage,
								limit: 50
							}
						})
						.then(resp => {
							debugger;
							if(resp.data.success) {

								// es5写法
								this.$data.tableData = resp.data;
								//this.baseQuery(this.$data.curTreeDeptId);
								//this.$data.exFormShow = false;
							} else {
								//
								this.$message.error(resp.data.msg);
							}
						}, resp => {});
				}
			},
			
			

		},
		//表单创建时执行
		created: function() {
		
		},
		components: {
			exports
		}
	}
</script>